<template>
  <div class="security-guest">
    <div class="header-box">
      <group-title :style="{ width: '375px' }"/>
      <search-bar
          :style="{ zIndex: 3 }"
          placeholder="搜索更多设备信息"
          @search="onSearch"
      />
    </div>
    <div class="event-box" ref="scrollList" @scroll="scrollEvent">
      <template v-for="securityGuest in sheBei">
        <category-title :title="securityGuest.cameraName" :unfoldName="!securityGuest.unfold ? '收起':'展开'"
                        unfold
                        @unfoldChange="unfoldChange(securityGuest)"
        />
        <div :class="{'unfold':securityGuest.unfold}" class="event-group">
          <event-info
              v-for="(item, index) in securityGuest.datas"
              :key="index"
              :columns="eventColumn"
              :datas="item"
              :style="{ height: '220px' }"
              @click="onEventClick(item.id)"
          />
        </div>
        <div v-if="!securityGuest.unfold" class="page flex-center">
          <a-pagination v-if="securityGuest.pageConfig" v-model:current="securityGuest.pageConfig.page"
                        :total="securityGuest.total" simple @change="pageChange(securityGuest, $event)"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import {inject} from "vue";
import {eventColumn} from "./data.js";

import SearchBar from "@/components/customs/search-bar";
import GroupTitle from "@/components/customs/group-title/index.vue";
import CategoryTitle from "@/components/customs/category-title/index.vue";
import EventInfo from "@/components/customs/event-info/index.vue";
import {GuestFk, GuestSb} from "@/common/customs/security";
import {reactive, ref} from "@vue/reactivity";
import {onMounted} from "@vue/runtime-core";

const onPageChange = inject("pageChange");
const smartObject = inject("smartObject");
const sheBei = ref([]);
const scrollList = ref();
const pageConfig = reactive({
  page: 1,
  page_size: 10,
  name: "",
});
const pageEnd = reactive({
  loading: false,
  isEnd: false
});

const onEventClick = (id) => {
  smartObject.msr = id;
  onPageChange(24);
};

const getData = async (arr) => {
  let list = await Promise.all(arr.map(async i => {
    const api = new GuestFk();
    i.pageConfig = {
      page: 1,
      page_size: 10,
      indexCode: i.indexCode,
    };
    api.params({
      ...i.pageConfig,
    });
    await api.send();
    const {data} = await api.getDatas();
    i.total = data.total;
    i.datas = data.data.map(i => {
      return {
        ...i,
        _image: {
          url: i.faceUrl,
          width: 80,
          height: 105,
        },
        _title: i.cn,
        // _tag: {
        //   type: "line-blue",
        //   text: "访客",
        // },
      };
    });
    i.unfold = true;
    return i;
  }));
  return list;
};

const getSB = async (nextPage = false) => {
  const api = new GuestSb();
  api.params(pageConfig);
  await api.send();
  const {data} = await api.getDatas();
  let newArr = await getData(data.data);

  if (nextPage) {
    sheBei.value.push(...newArr);
  } else {
    pageConfig.page = 1;
    scrollList.value.scrollTop = 0
    sheBei.value = newArr;
  }
  pageEnd.loading = false;
  pageEnd.isEnd = pageConfig.page >= data.last_page;
};
const pageChange = async (data, page, size) => {
  const api = new GuestFk();
  api.params(data.pageConfig);
  await api.send();
  const {data: res} = await api.getDatas();
  data.total = res.total;
  data.datas = res.data.map(i => {
    return {
      ...i,
      _image: {
        url: i.faceUrl,
        width: 80,
        height: 105,
      },
      _title: i.cn,
      // _tag: {
      //   type: "line-blue",
      //   text: "访客",
      // },
    };
  });
};
const unfoldChange = (data) => {
  data.unfold = !data.unfold;
};
const onSearch = (text) => {
  pageConfig.name = text;
  pageConfig.page = 1;
  getSB();
};

const scrollEvent = (event) => {
  // console.log(listRef.value.clientHeight);
  // console.log(listRef.value.scrollTop);
  // console.log(Math.ceil(event.currentTarget.scrollTop + event.currentTarget.clientHeight), event.currentTarget.scrollHeight);
  // console.log(Math.ceil(event.currentTarget.scrollTop + event.currentTarget.clientHeight) >= event.currentTarget.scrollHeight - 30);
  // console.log(event);
  if (Math.ceil(event.currentTarget.scrollTop + event.currentTarget.clientHeight) >= event.currentTarget.scrollHeight - 30 && !pageEnd.loading) {
    if (!pageEnd.isEnd) {
      pageConfig.page++;
      pageEnd.loading = true;
      getSB(true);
    }
  }
};

onMounted(async () => {
  getSB();
  // getData();
});

</script>

<style lang="less" scoped>
@import "./index.less";
</style>
